<template>
  <el-container class="friends_tas">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="流程名称：">
                <el-select v-model="searchParams.cycleId">
                  <el-option :value="''" label="请选择" />
                  <el-option v-for="item in lifeCycleList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="float: right;">
              <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-row :gutter="40">
          <el-col :span="24">
            <div style="display: inline-flex;">
              <div v-for="(tag, index) in phaseList" :key="index" style="padding: 0 20px 0 20px;">
                <el-badge :value="'阶段' + (index+1) " type="info">
                  <el-tag :key="tag" type="info" :hit="false" effect="plain" :color="tag.color" class="tag-image" @click="handlePhaseTag(tag, index)">
                    <div style="margin-top: 20px;align-content: center;display: block;">
                      <div>
                        <span style="font-size: 14;font-weight: 700;">{{ tag.name }}</span>
                      </div>
                      <span>124214</span>
                    </div>
                  </el-tag>
                </el-badge>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <vxe-table
          ref="xTable"
          border
          resizable
          show-overflow
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="tableData"
          width
          max-height="380"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column type="seq" width="35" />
          <vxe-table-column field="name" width="120" title="客户名称" />
          <vxe-table-column field="employeeName" min-width="150" align="left" title="跟进员工" />
          <vxe-table-column field="mobile" width="200" align="left" title="客户电话" />
          <vxe-table-column field="friendsTagsStr" width="220" align="left" title="客户标签" />
          <vxe-table-column field="sourceFromDesc" width="180" align="left" title="客户来源" />
          <vxe-table-column field="joinTime" width="180" align="left" title="加入时间" />
          <vxe-table-column field="remark" min-width="240" title="备注" />
          <vxe-table-column title="操作" fixed="right" align="center" width="100" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openDialog(scope.row.id, true)">详情</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { getFriendsLifeCycleList, getFriendsLifeCyclePhaseList } from '@/api/cop/lifeCycle'
import { getFriendsPageList } from '@/api/cop/friends'
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      lifeCycleList: [],
      phaseList: [],
      tableData: [],
      loading: false,
      searchParams: {
        cycleId: ''
      },
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  created() {
    this.getFriendsLifeCycleList()
  },
  methods: {
    getFriendsLifeCycleList() {
      getFriendsLifeCycleList({}).then(response => {
        if (response) {
          this.lifeCycleList = response
        }
      })
    },
    getList1() {
      this.getFriendsLifeCyclePhaseList()
      this.getList()
    },
    getFriendsLifeCyclePhaseList() {
      getFriendsLifeCyclePhaseList({ ... this.searchParams }).then(response => {
        if (response) {
          this.phaseList = response
          this.phaseList.forEach(d => {
            d.color = '#eaeaea'
          })
        }
      })
    },
    getList() {
      getFriendsPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.tableData = response.records
          this.total = response.total
        }
      })
    },
    handlePhaseTag(item, index) {
      item.hit = 'true'
      item.color = '#FFFFFF'
    }
  }
}
</script>

<style lang="scss">
.friends_tas {
  .tag-image {
    width: 120px;
    height: 80px;
    margin-left:5px;
    margin-bottom: 5px;
    cursor: pointer;
    border: transparent;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
  }
  .el-badge {
    .el-badge__content.is-fixed {
        position: absolute;
        top: 5px;
        right: 0px;
        -webkit-transform: translateY(-30%) translateX(-200%);
        transform: translateY(-30%) translateX(-200%);
    }
    .el-badge__content {
        background-color: transparent;
        border-radius: 0px;
        color: #0d0d0d;
        display: inline-block;
        font-size: 4px;
        font-weight: 600;
        height: 14px;
        line-height: 14px;
        padding: 0 4px;
        text-align: center;
        white-space: nowrap;
        border: transparent;
    }
  }
}
</style>
